@mixin typography($font-size, $font-weight, $font-color) {
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
  font-weight: $font-weight;
  color: $font-color;
}

@mixin media-query($breakpoint) {
  @if $breakpoint == "xsmall" {
    @media screen and (max-width: 320px) {
      @content;
    }
  } @else if $breakpoint == "small" {
    @media screen and (max-width: 576px) {
      @content;
    }
  } @else if $breakpoint == "medium" {
    @media screen and (max-width: 768px) {
      @content;
    }
  } @else if $breakpoint == "large" {
    @media screen and (max-width: 992px) {
      @content;
    }
  } @else if $breakpoint == "xlarge" {
    @media screen and (max-width: 1200px) {
      @content;
    }
  }
}
